<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>View Timeline attached to an SVG graphics element in a nested &lt;svg></title>
</head>
<style type="text/css">
  @keyframes stroke {
    from { stroke: rgb(0, 0, 254); }
    to { stroke: rgb(0, 128, 0); }
  }

  #line {
    animation: stroke auto linear both;
    animation-timeline: view();
    animation-range: exit-crossing;
  }
  .spacer {
    height:  100vh;
  }
</style>
<body>
<svg width="100" height="3000" stroke="red" stroke-width="5">
  <svg>
    <path id="line" d="M 50 0 V 3000"></path>
  </svg>
</svg>
<div class="spacer"></div>
</body>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<script>
  promise_test(async t => {
    const scroller = document.scrollingElement;
    const target = document.getElementById('line');
    const anim = target.getAnimations()[0];
    await anim.ready;
    assert_equals(getComputedStyle(target).stroke, 'rgb(0, 0, 254)');
    scroller.scrollTop =
        0.5*(scroller.scrollHeight - scroller.clientHeight);
    await waitForNextFrame();
    assert_equals(getComputedStyle(target).stroke, 'rgb(0, 64, 127)');
  }, 'View timeline attached to SVG graphics element');
</script>
</html>
